<!DOCTYPE html>
<html>
<head>
  <title>Newlife Slide Control</title>
  <!-- metadata -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
  <meta name="author" content="Martin Smith" />
  <meta name="company" content="Newlife Church Toronto" />
  <script src="js/ini.js"></script><!-- contains initialization variables required by other files -->
  <script src="js/parser.js"></script>
  <script src="js/control.js"></script>
  <script src="js/localStorage.js">//<!-- TODO: we can remove this script if we can make addSong() work without it. --></script>
  <script src="js/searchList.js"></script>
  <link rel="shortcut icon" href="favicon.ico" />
  <!-- style sheet links -->
  <link rel="stylesheet" href="css/form.css" type="text/css" media="screen" id="editFields" />
  <link rel="stylesheet" href="css/control.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/backend.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/slides.css" type="text/css" media="screen, projection" />
  <link rel="stylesheet" href="css/outline.css" type="text/css" media="screen" />
</head>
<body>
  <nav>
    <a href='javascript:addSong();'>Add a song</a>
    <a href='javascript:editSettings();'>Church settings</a>
    <span id="diffLink"><a href="diff.html">Synchronise with server</a></span>
  </nav>
  <div id="container">
    <div id="content">
      <div id="column1">
        <div class="columnContent">
          <form onsubmit="return addSearchResult();" id='form'>
            <div id="searchHeader" class="row">
              <input type="search" id="searchBox" placeholder="Type to search by title" onKeyUp="updateSearch(form.fullTextSearch.checked); return searchKeyPress();" onClick="updateSearch(form.fullTextSearch.checked)" class="songTitleWidth" /><br />
              <input type="checkbox" id="fullTextSearch" onChange="updateSearch(this.value)" onClick="updateSearch(this.value)" /><label for="fullTextSearch">Search song lyrics too</label><br />
            </div>
            <div id="searchResults" class="row">
              <select multiple name="full_list" size="20" id="fullList" class="cell"></select>
              <input type="button" value=" &#x21E8; " id="moveRightButton"
                    onclick="addSelectedToSetList()" />
            </div>
          </form>
          <div id="preview" class="row autogenerated slide slidecontent">
          </div>
        </div>
      </div>
      <div id="column2">
        <div class="columnContent" id="interactive">
          <select id="selectSetList" class="row"><option>New set list</option></select>
          <div id="setList" class="row">
            <div class="setListItem" position="-1" style="height: 2.5em;" id="setListSong-1">
              <span class="rmButton">&#x25CB;</span>
              <span class="setListTitle">Welcome slide</span>
              <span onclick="backToWelcomeSlide()" class="showNowButton">&#9654;</span>
            </div>
          </div>
          <div id="setListMenu" class="row">
            <a href="chords.html" target="_blank">Print</a>
            <a href="javascript:saveSetList(true);">Save</a> or
            <a href="javascript:clearSetList();">Clear</a> this list
          </div>
        </div>
      </div>
      <div id="column3">
        <div class="columnContent" id="blankSlide">
          <div class="row" style="height: 2em;">Words typed below will appear on blank slide</div>
          <textarea id="addWordsBox" class="row"></textarea>
          <div class="row">
            <p>Select a view below to launch the slideshow.</p>
            <p>Drag the window to the secondary monitor.</p>
            <p>Whilst it is selected, press <code><b>F11</b></code> to fill the screen.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
      
  <div id="controlPanel">
    <input class="bigButton" type="button" id="launchButton" onclick="setScreen('songs');" value="Worship Slides" />
    <input class="bigButton" type="button" id="blankButton" value="Blank slide" onClick="toBlankSlide();" />
    <input class="bigButton" type="button" id="announceButton" onclick="setScreen('announcements');" value="Announcements" />
    <input class="bigButton" type="button" id="sermonButton" onclick="setScreen('sermon');" value="Sermon" />
    <input class="bigButton" type="button" id="fileButton" onclick="activeView('filesList');" value="Files" />
    <input class="bigButton" type="button" id="closeButton" onclick="closeSlides()" value="Close" disabled />
    <input class="bigButton" type="button" id="previousButton" value="Back" disabled />
    <input class="bigButton" type="button" id="nextButton" value="Advance slide" disabled />
  </div>
  <footer></footer>
</body>
</html>
